import { CityPicker } from '@/components/CityPicker';
import { CityPickerValue } from '@/components/CityPicker/interface';
import { StudyObjectCheckBoxGroup } from '@/components/StudyObjectSelect';
import TradeGroupSelect from '@/components/TradeGroupSelect';
import { useTradeData } from '@/components/TradeSelect/useTradeData';
import { Cascader, Checkbox, Form, Radio } from 'antd';
import { forwardRef, useImperativeHandle } from 'react';
import { tradeObj } from '../Plantemp/Wait/AddEditNew';
export interface ShelfUpperRef {
  submit(): Promise<{
    region: string;
    regionName: string;
    entTypeCode: string;
    trade: string;
    tradeName: string;
    showTrade: string;
    isCharge?: number;
  }>;
}

export interface ShelfUpperPorps {
  useFor?: 'package' | 'learn';
}

// 上架 给课件包,计划模版,试卷用的
export const ShelfUpperModalContent = forwardRef<ShelfUpperRef, ShelfUpperPorps>(function PackageUpper(
  { useFor = 'package' },
  ref,
) {
  const { data = [] } = useTradeData();

  const [form] = Form.useForm<{
    region: string[];
    regionName: string[];
    entTypeCode: string;
    trade: string;
    tradeName: string;
    showTrade: string;
    isCharge?: number;
  }>();
  const region = Form.useWatch('region', form) ?? ['ALL'];
  useImperativeHandle(
    ref,
    () => {
      return {
        async submit() {
          const value = await form.validateFields();
          const tradeArray = !Array.isArray(value.trade) ? value.trade.split(',') : value.trade;
          return {
            region: value.region.join(','),
            regionName: value.regionName.join(','),
            entTypeCode: Array.isArray(value.entTypeCode) ? value.entTypeCode.join(',') : value.entTypeCode,
            trade: Array.isArray(value.trade) ? value.trade.join(',') : value.trade,
            showTrade: value.showTrade,
            tradeName: data
              .filter((v) => tradeArray.includes(v.value))
              .map((v) => v.label)
              .join(','),
            isCharge: value.isCharge,
          };
        },
      };
    },
    [data, form],
  );

  return (
    <Form
      form={form}
      initialValues={{ region: ['ALL'], regionName: ['全部'], entTypeCode: [], trade: [], tradeName: [], isCharge: 1 }}
    >
      <Form.Item label="城市地域" required>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <Checkbox
            style={{ flexShrink: 0 }}
            checked={region[0] === 'ALL'}
            onChange={(value) => {
              if (value.target.checked) {
                form.setFieldsValue({
                  region: ['ALL'],
                  regionName: ['全部'],
                });
              } else {
                form.setFieldsValue({
                  region: [],
                  regionName: [],
                });
              }
            }}
          >
            全部
          </Checkbox>
          <Form.Item
            style={{ flexGrow: 1 }}
            name="region"
            noStyle
            getValueFromEvent={(value, options: CityPickerValue[][]) => {
              form.setFieldsValue({
                regionName: options.map((v) => v[v.length - 1]).map((v) => v.label),
              });
              return value;
            }}
            rules={[{ required: true, message: '请选择城市地域' }]}
          >
            {region[0] !== 'ALL' ? <CityPicker showCheckedStrategy={Cascader.SHOW_CHILD} multiple /> : <span></span>}
          </Form.Item>
        </div>
      </Form.Item>
      <Form.Item hidden name="regionName">
        <span></span>
      </Form.Item>
      <Form.Item label="组织类型" name="entTypeCode" rules={[{ required: true, message: '请选择组织类型' }]}>
        <Checkbox.Group>
          <Checkbox value="government">政府</Checkbox>
          <Checkbox value="association">协会</Checkbox>
          <Checkbox value="qiye">企业</Checkbox>
        </Checkbox.Group>
      </Form.Item>
      <Form.Item label="所属行业" name="trade" rules={[{ required: true, message: '请选择所属行业' }]}>
        {/* <TradeSelectFlat /> */}
        <TradeGroupSelect
          value={''}
          defaultValue={form.getFieldValue('showTrade') || []}
          onChange={(e: tradeObj) => {
            console.log(e);
            form.setFieldsValue({
              trade: e.code,
              tradeName: e.tradeName,
              showTrade: JSON.stringify(e.showTrade),
            });
          }}
        />
      </Form.Item>
      <Form.Item
        preserve={true}
        hidden
        label="所属行业tradeName"
        name="tradeName"
        rules={[{ required: true, message: '请选择所属行业' }]}
      ></Form.Item>
      <Form.Item
        preserve={true}
        hidden
        label="所属行业showTrade"
        name="showTrade"
        rules={[{ required: true, message: '请选择所属行业' }]}
      ></Form.Item>
      {useFor === 'package' ? (
        <Form.Item label="是否收费" name="isCharge" required>
          <Radio.Group>
            <Radio value={1}>是</Radio>
            <Radio value={0}>否</Radio>
          </Radio.Group>
        </Form.Item>
      ) : null}
    </Form>
  );
});
export interface ShelfAIRef {
  submit(): Promise<{
    isCharge: number;
  }>;
}

// 上架 给ai学习的
export const ShelfAIModalContent = forwardRef<ShelfAIRef, any>((props, ref) => {
  const [form] = Form.useForm<{
    isCharge: number;
  }>();

  useImperativeHandle(
    ref,
    () => {
      return {
        async submit() {
          const value = await form.validateFields();
          return value;
        },
      };
    },
    [form],
  );

  return (
    <Form form={form} initialValues={{ isCharge: 1 }}>
      <Form.Item label="是否收费" name="isCharge" required>
        <Radio.Group>
          <Radio value={1}>是</Radio>
          <Radio value={0}>否</Radio>
        </Radio.Group>
      </Form.Item>
    </Form>
  );
});

// 给课程用的
export interface ShelfCourseUpperRef {
  submit(): Promise<{
    learnObj: string;
    isCharge: number;
  }>;
}

export const ShelfUpperModalContentForCourse = forwardRef<ShelfCourseUpperRef, unknown>(function CourseUpper(
  props,
  ref,
) {
  const [form] = Form.useForm<{
    learnObj: string;
    isCharge: number;
  }>();

  useImperativeHandle(
    ref,
    () => {
      return {
        async submit() {
          return await form.validateFields();
        },
      };
    },
    [form],
  );
  return (
    <Form
      form={form}
      initialValues={{
        // learnObj: getStudyObjectDefaultAll(),
        learnObj: '',
        isCharge: 1,
      }}
    >
      <Form.Item label="学习对象" name="learnObj" rules={[{ required: true }]}>
        <StudyObjectCheckBoxGroup optionsType={2} />
      </Form.Item>
      <Form.Item label="是否收费" name="isCharge" required>
        <Radio.Group>
          <Radio value={1}>是</Radio>
          <Radio value={0}>否</Radio>
        </Radio.Group>
      </Form.Item>
    </Form>
  );
});
